<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
</head>
<body>
<div id="app">
    <template id="index">
        <el-container class="home-container">
            <el-aside width="200px">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        unique-opened
                        :default-openeds="['1']"
                        router
                >
                    <el-submenu
                            :index="menuItem.id + ''"
                            v-for="menuItem in menuList"
                            :key="menuItem.id"
                    >
                        <template slot="title">
                            <i :class="menuItem.icon"></i>
                            <span>{{ menuItem.menuName }}</span>
                        </template>

                        <el-menu-item
                                :index="subItem.path"
                                v-for="subItem in menuItem.children"
                                :key="subItem.id"
                        >
                            <template slot="title">
                                <i :class="subItem.icon"></i>
                                <span>{{ subItem.menuName }}</span>
                            </template>
                        </el-menu-item
                        >
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>配置中心</el-breadcrumb-item>
                    <el-breadcrumb-item>代码生成列表</el-breadcrumb-item>
                </el-breadcrumb>
                <el-row>
                    <el-col :span="8">
                        <el-input
                                placeholder="请输入表名"
                                v-model="searchPage.tableName"
                                class="input-with-select"
                                @keydown.enter.native="search"
                                clearable
                        >
                            <el-button
                                    slot="append"
                                    icon="el-icon-search"
                                    @click="search"
                            ></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary" @click="openDialog">生成代码</el-button>
                    </el-col>
                </el-row>

                <el-dialog
                        title="项目信息"
                        :visible.sync="dialogVisible"
                        width="50%"
                        :before-close="handleClose"
                >
                    <el-form label-position="left" label-width="120px" :model="projectForm" :rules="rules"
                             ref="ruleForm">
                        <el-form-item label="port" prop="port">
                            <el-input v-model="projectForm.port"></el-input>
                        </el-form-item>
                        <el-form-item label="projectRootDir" prop="projectRootDir">
                            <el-input placeholder="请选择文件路径" v-model="projectForm.projectRootDir"></el-input>
                        </el-form-item>
                        <el-form-item label="Group" prop="groupId">
                            <el-input v-model="projectForm.groupId" placeholder="com.demo"></el-input>
                        </el-form-item>
                        <el-form-item label="Artifact" prop="artifactId">
                            <el-input v-model="projectForm.artifactId" placeholder="demo"></el-input>
                        </el-form-item>
                        <el-form-item label="Name" prop="name">
                            <el-input v-model="projectForm.name" placeholder="demo"></el-input>
                        </el-form-item>
                        <el-form-item label="Description" prop="description">
                            <el-input v-model="projectForm.description"
                                      placeholder="Demo project for Spring Boot"></el-input>
                        </el-form-item>
                        <el-form-item label="PackageName" prop="packageName">
                            <el-input v-model="projectForm.packageName" placeholder="com.demo"></el-input>
                        </el-form-item>
                        <el-form-item label="Java" prop="jdkVersion">
                            <el-radio-group v-model="projectForm.jdkVersion" @change="radioChange">
                                <el-radio :label="18">18</el-radio>
                                <el-radio :label="17">17</el-radio>
                                <el-radio :label="11">11</el-radio>
                                <el-radio :label="1.8">8</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否集成oauth2(生成登录-验证码)" prop="isIntegration">
                            <el-radio-group v-model="projectForm.isIntegration" @change="radioChange">
                                <el-radio :label=true>是</el-radio>
                                <el-radio :label=false>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="author" prop="author">
                            <el-input v-model="projectForm.author"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="createCode('ruleForm')">确 定</el-button>
                    </span>
                </el-dialog>

                <el-card class="box-card">
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            stripe
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="序号" prop="" width="100" align="center">
                            <template slot-scope="scope">
                                <span v-text="scope.$index + 1"> </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="表名" prop="tableName" align="center">
                        </el-table-column>
                        <el-table-column prop="tableComment" label="表描述" align="center"></el-table-column>
                        <el-table-column align="center"
                                         prop="createTime"
                                         label="创建时间"
                                         show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="handleColumn(scope.row)">查看列信息
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="searchPage.current"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchPage.size"
                            layout="sizes, prev, pager, next"
                            :total="total"
                    >
                    </el-pagination>
                </el-card>

                <el-dialog :title="tableName"
                           :visible.sync="columnDialogVisible"
                           width="50%"
                           :before-close="columnHandleClose">
                    <el-table :data="columnData">
                        <el-table-column label="序号" prop="" width="100" align="center">
                            <template slot-scope="scope">
                                <span v-text="scope.$index + 1"> </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="columnName"
                                width="200px"
                                label="字段名称"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="columnLength"
                                width="100px"
                                label="字段长度"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column prop="dataType" width="100px" align="center" label="字段类型">
                        </el-table-column>
                        <el-table-column
                                prop="columnComment"
                                width="200px"
                                label="字段描述"
                                align="center"
                        >
                        </el-table-column>
                    </el-table>
                </el-dialog>
            </el-main>
        </el-container>
    </template>

</div>

</body>

<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="element/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let routes = [
        {path: '/', redirect: '/index'},
    ];
    //把组件交给路由器：
    let router = new VueRouter({routes});
    new Vue({
        el: '#app',
        router,
        data() {
            return {
                menuList: [
                    {
                        id: 1,
                        menuName: "配置中心",
                        icon: "el-icon-setting",
                        path: "index",
                        children: [
                            {
                                id: 1 - 1,
                                menuName: "代码生成器",
                                icon: "el-icon-edit",
                                path: "/table"
                            }
                        ]
                    }
                ],
                dialogVisible: false,
                columnDialogVisible: false,
                projectForm: {
                    projectRootDir: '',
                    groupId: '',
                    artifactId: '',
                    name: '',
                    description: '',
                    packageName: '',
                    jdkVersion: '',
                    isIntegration:'',
                    author: '',
                    tableNames: '',
                    port: '',
                },
                tableData: [],
                searchPage: {
                    current: 1,
                    size: 10,
                    tableName: ""
                },
                total: 0,
                multipleSelection: [],
                columnData: [],
                tableName: '',
                rules: {
                    projectRootDir: [
                        {required: true, message: '请输入projectRootDir', trigger: 'blur'},
                    ],
                    groupId: [
                        {required: true, message: '请输入groupId', trigger: 'blur'},
                    ],
                    artifactId: [
                        {required: true, message: '请输入artifactId', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入name', trigger: 'blur'},
                    ],
                    description: [
                        {required: true, message: '请输入description', trigger: 'blur'},
                    ],
                    packageName: [
                        {required: true, message: '请输入packageName', trigger: 'blur'},
                    ],
                    jdkVersion: [
                        {required: true, message: '请选择jdkVersion', trigger: 'blur'},
                    ],
                    isIntegration:[
                        {required: true, message: '请选择是否集成Oauth2', trigger: 'blur'},
                    ],
                    author: [
                        {required: true, message: '请输入author', trigger: 'blur'},
                    ],
                    port: [
                        {required: true, message: '请输入项目端口', trigger: 'blur'},
                    ],
                }
            }
        },
        created() {
            this.search();
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSizeChange(val) {
                this.searchPage.size = val;
            },
            handleCurrentChange(val) {
                this.searchPage.current = val;
                this.search();
            },
            //复选框触发事件
            handleSelectionChange(e) {
                this.projectForm.tableNames = "";
                for (const key in e) {
                    this.projectForm.tableNames += e[key].tableName + ",";
                }
                console.log(this.projectForm.tableNames);
            },
            // 查询
            async search() {
                const {data: res} = await axios.post(
                    "http://localhost:8080/table/info/",
                    this.searchPage
                );
                this.tableData = res.records;
                this.total = res.total;
            },
            //打开表单页
            openDialog() {
                if (this.projectForm.tableNames.length === 0) {
                    this.$message({
                        type: "warning",
                        message: "大哥，至少选择一条吧^_^"
                    });
                    return;
                }
                this.dialogVisible = true;
            },
            // 生成代码
            createCode(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post(
                            "http://localhost:8080/table/info/create/code",
                            this.projectForm
                        ).then(res => {
                            res === false
                                ? this.$message.error("后端写的好辣鸡，竟然生成失败，tui～")
                                : this.$message.success(
                                "代码已生成，为您的节约了90%的工作量，开心摸鱼叭～"
                                );
                            this.dialogVisible = false
                        });
                    }else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            radioChange(value) {
                console.log(value);
            },
            handleClose() {
                this.dialogVisible = false
            },
            columnHandleClose() {
                this.columnDialogVisible = false
            },
            async handleColumn(val) {
                this.columnDialogVisible = true
                console.log(val)
                this.tableName = val.tableName;
                const {data: res} = await axios.get(
                    "http://localhost:8080/table/column/" + this.tableName
                );
                this.columnData = res;
                console.log(res);
            }
        }
    })

</script>

<style>
    /* 全局样式 */
    html, body, #app {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #F2F6FC;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .home-container {
        height: 100%;
    }

    .el-aside {
        background-color: #545c64;
    }

    .box-card {
        margin-top: 10px;
    }

    .el-row {
        margin-top: 10px;
    }

    .el-tag--medium {
        font-size: 14px;
    }

    .el-button--primary {
        margin-left: 200px;
    }

    .el-pagination {
        float: right;
    }
</style>
</html>